<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数的this</title>
    <script>
        /* 
        this 就是调用方法的对象
            作用：可以在方法中通过this引用这个对象。

            箭头函数
                （[参数]）=>返回值

            例子
                无参数的
                    ()=>返回值
                
                一个参数的
                    (参数)=>返回值
                
                多个参数的
                    (a,b,c)=>返回值

                只有一个语句的箭头函数
                    ()=>
                只返回一个对象的箭头函数
                    ()=>({})
                有多行语句的函数
                    ()=>{
                    }


            箭头函数的this

            箭头函数没有自己的this,它的this由它的外层作用域决定，外层作用域的this是谁，它的this就是谁。

            箭头函数的调用方式和方法无关。


        */
        function fn1(){
            console.log(`fn1------>`,this)
        }
        
        const fn2=()=>{
            console.log(`fn2------>`,this);          // 这个箭头函数是在全局创建的，所以它的this总是window
        }

        
        fn1()
        fn2()
console.log(`---------------------分隔符-----------------------------`)

        const obj={name:`孙悟空`,
        fn1:fn1,        //将fn1与fn2设置为obj的方法,这里前后一样，可以省略
        fn2,
        sayhello:function(){        //  创建一个sayhello属性，其值为function函数，这里的function可以简写不写
            console.log(this.name)

            function t(){
                console.log(this)
                }

                t() // 以函数方法调用，它里面的this是window

console.log(`---------------------分隔符-----------------------------`)          
            const t1=()=>{
                console.log(this)
                }
                t1()    // 它的this由外层决定，外层是sayhello,而sayhello的this是obj
            }
        }

        obj.fn1()       // obj
        obj.fn2()       // window
  
        obj.sayhello()  //调用这个方法
        
    </script>
</head>
<body>
    
</body>
</html>